<template>
  <div class="main-search" v-loading="load">
      <div style="display: flex;margin:10px auto">
          <span style="margin:0 auto">查询用户</span>
      </div>
      <el-form ref="form" :model="form" label-width="80px" label-position="left">
        <el-form-item label="用户ID">
            <el-input v-model="form.id"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
            <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
<!--        <el-form-item label="用户编码">-->
<!--            <el-input v-model="form.user_code"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="部门">
            <!-- <el-select v-model="form.region" placeholder="请选择部门">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
            </el-select> -->
            <div style="height:200px;border: 1px solid rgb(220,220,220);border-radius:5px">
                <el-scrollbar style="height: 100%;">
                    <el-tree :data="sideList" @check-change="getDepartment"  :show-checkbox="true" :default-expand-all="true" :props="Props" @node-click="handleNodeClick"></el-tree>
                </el-scrollbar>
                
            </div>
        </el-form-item>
        <el-form-item label="角色">
            
            <div>
                <el-select v-model="form.role" multiple placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
                
            </div>
        </el-form-item>
<!--        <el-form-item label="性别">-->
<!--            <el-select v-model="form.sex" placeholder="请选择性别">-->
<!--            <el-option label="男" value="0"></el-option>-->
<!--            <el-option label="女" value="1"></el-option>-->
<!--            <el-option label="未知" value="2"></el-option>-->
<!--            </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="手机号">
            <el-input v-model="form.phone"></el-input>
        </el-form-item>
         <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
            <el-button  @click="exports" >导出</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
import $ from "jquery";
import axios from 'axios'

export default {
    props:{
        sideList:Array,
        info:Object
    },
    data() {
      return {
          load:true,
        form: {
          id: '',
          userName: '',
          name: '',
          phone:'',
          sex:'',
          user_code:'',
          department:[],
          role:'',
        },
        Props:{label:'name'},
        options: [],
        value1: [],
        value2: []

      }
    },
    mounted:function(){
        // 暂时解决props获取不到值问题
        setTimeout(()=>{
        console.log(this.info.roleList)
            this.getRoles();

        },1000)

    }, 
    watch:{
        info(newValue,oldValue){
            console.log(newValue);
        }
    },
    methods:{
        exports(){
            // console.log(231)
            // this.axios.post("/api/v20/user/export",info=" + JSON.stringify(this.form) + "&pre=1"
            // )
            this.load = true
            axios({
                url: this.info.export,
                method: 'post',
                headers: {
                    'Content-type': 'application/x-www-form-urlencoded'
                },
                data: "info=" + JSON.stringify(this.form) + "&pre=1",
                responseType: 'blob'
            }).then(res =>{
                // console.log(res.data)
                this.load = false
                var a = document.createElement('a');
                a.download = 'data.xlsx';
                a.href = window.URL.createObjectURL(new Blob([res.data]));
                a.click();
            }); 
        },
        onSubmit(){
            this.$router.push({name:"userTable",params:{'type':this.info.type,'editType':'search',search:this.form}})
            // this.loading(true)
            // console.log(JSON.stringify(this.form))
            // $.post(this.info.searchUser,{info:JSON.stringify(this.form),"pre":1},Response => {
            //     if(Response.success){
            //         // this.options = Response.data.data;
            //         this.loading(false)
            //         this.$router.push({name:"userTable",params:{'type':this.info.type,'editType':'search',infoData: Response.data.data,totalRow:Response.data.totalRow.count,search:this.form}})
            //     }else{
            //         this.$message.error("搜索错误");
            //     }
            //     // console.log(Response)
            // })
        },
        getRoles(){
            // /api/v20/role/list
            $.get(this.info.roleList,{},Response => {
                if(Response.success){
                    this.options = Response.data;
                }else{
                    this.$message.error("出错");
                }
                this.load = false
                // console.log(Response)
            })
        },
        getDepartment(data, checked, indeterminate){
            // console.log(data, checked, indeterminate)
            if(checked){
                // 增加节点数据
                this.form.department.push(data.id)
            }else{
                // 删除
                var index = this.form.department.indexOf(data.id);
                if(index > -1){
                    this.form.department.splice(index,1)
                }
                // console.log(this.form.department)
            }
        },
        handleNodeClick(){

        },
        loading(bool = true) {
                
                const loading = this.$loading({
                lock: true,
                text: '',
                spinner: 'el-icon-loading',
                background: 'rgba(255, 255, 255, 0.7)'
                });
                if(!bool){
                    loading.close();
                }
            }
    }
}
</script>

<style lang="less">
    .main-search{
        /* margin-top: 8rem; */
        height:100vh;
        width: 30rem;
        margin:0 auto 0 auto;
        overflow-y:auto;
        .el-scrollbar__wrap{
            overflow-x:hidden;
        }
    }
</style>